<template>
	<view class="box">

		<view class="person_box clear">
			<view class="person_data" v-for="(val,index) in addressList" :key="val._id">
				<view class="list">
					<view class="left">
						<view class="p1">
							联系人
						</view>
						
					</view>
					<view class="right">
						<input type="text" v-model="val.person" class="inp p2"/>
						<view class="xian"></view>
						<view class="gender_box p2">
							<text class="nan gender" :id="handleColor==true ? 'gender' : ''" @tap="handleColor1('男')">男</text>
							<text class="nv gender" :id="handleColor==false ? 'gender' : ''" @tap="handleColor1('女')">女</text>
						</view>
					</view>
					
					<view class="xian"></view>
					
				</view>
				
				
				<view class="list">
					<view class="left">
						<view class="p1">
							手机号
						</view>
					</view>
					<view class="right">
						<input type="text" v-model="val.phone" class="inp p2"/>
					</view>
					<view class="xian"></view>
				</view>
				
				<view class="list">
					<view class="left">
						<view class="p1">
							收获地址
						</view>
					</view>
					<view class="right">
						<view class="p2">
							{{val.city}}
						</view>
					</view>
					<view class="xian"></view>
				</view>
				
				
				<view class="list">
					<view class="left">
						<view class="p1">
							详细地址
						</view>
					</view>
					<view class="right">
						<input type="text" v-model="val.address" class="inp p2"/>
					</view>
				</view>
			</view>
		</view>
		
		<view class="but_box">
			<button type="default">保存地址</button>
			<button type="default" class="but">删除地址</button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				handleColor: ''
			}
		},
		//修改地址路由传参
		onLoad(options) {
			this.addressList.push(JSON.parse(options.addressList))
			console.log(this.addressList)
			let address = this.addressList[0]
			//判断性别选项默认选什么
			if(address.gender == '男'){
				this.handleColor = true
			}else{
				this.handleColor = false
			}
		},
		methods: {
			handleColor1(e){
				if(e == '男'){
					this.handleColor = true
				}else{
					this.handleColor = false
				}
				this.addressList[0].gender = e
				console.log(this.addressList[0])
			}
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100%;
		background-color: #F0F0F0;
	}
	.person_box{
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		position: relative;
		top: 10rpx;
	}
	.person_data{
		width: 95%;
		height: auto;
		margin: 0 auto;
	}
	.list{
		height: 100rpx;
		margin-bottom: 1rpx;
	}
	.list:nth-child(1){
		height: 200rpx;
	}
	.gender{
		width: 120rpx;
		line-height: 60rpx;
		text-align: center;
		display: inline-block;
		border: 1rpx solid #188870;
		color: #188870;
		border-radius: 10rpx;
	}
	#gender{
		width: 120rpx;
		line-height: 60rpx;
		text-align: center;
		display: inline-block;
		border: 1rpx solid #188870;
		background-color: #188870;
		color: #FFFFFF;
		border-radius: 10rpx;
	}
	.nan{
		margin-right: 10rpx;
	}
	.left {
		width: 20%;
		height: 100%;
		float: left;
	}
	.left .p1{
		width: 100%;
		line-height: 100rpx;
		font-size: 0.8rem;
		font-weight: 700;
	}
	
	.right {
		width: 80%;
		height: 100%;
		float: left;
	}
	.right .p2{
		width: 100%;
		line-height: 100rpx;
		font-size: 0.8rem;
	}
	.right .inp{
		width: 100%;
		height: 100rpx;
	}
	.xian{
		width: 100%;
		height: 1rpx;
		clear: both;
		background-color: #F0F0F0;
	}
	.but_box{
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
	}
	.but_box button{
		width: 100%;
		line-height: 85rpx;
		background-color: #007860;
		color: #FFFFFF;
		margin-top: 45rpx;
		font-size: 1rem;
	}
	.but_box .but{
		background-color: #FFFFFF;
		border: 1rpx solid #007860;
		color: #007860;
		margin-top: 20rpx;
	}
</style>
